@mixin bg($name) {
    background: url("./images/" + $name) no-repeat center / 100%;
}
.container {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #86defc 0%, #71cceb 20%, #73b2f1, #349ef8 83%, #cce293 93%, #e6cd6a 100%);
}
.fish_box {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 64px);
    height: calc(100% - 64px);
}
.fish {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 64px;
    height: 64px;
    @include bg("fish.png");
}
.fish_turn {
    transform: scaleX(-1);
}
.local_video {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 150px;
    height: 150px;
    transform: scaleX(-1);
}
// 游戏准备
.prepare {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 560px;
    height: 520px;
    padding-top: 20px;
    background: #ffffff;
    box-shadow: 0 4px 10px 0 rgba(190, 186, 196, 0.51);
    border-radius: 20px;
}
.prepare_title {
    margin: 0 auto;
    width: 95px;
    height: 23px;
    @include bg("prepare_title.png");
}
.prepare_rule {
    padding: 0 30px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
}
%prepare_teach {
    position: absolute;
    width: 80px;
    height: 98px;
}
.prepare_teach1 {
    @extend %prepare_teach;
    top: 110px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.prepare_teach2 {
    @extend .prepare_teach1;
    top: 316px;
}
.prepare_teach3 {
    @extend %prepare_teach;
    top: 218px;
    left: 137px;
}
.prepare_teach4 {
    @extend %prepare_teach;
    top: 218px;
    right: 137px;
}
.prepare_example {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    cursor: pointer;
}
@for $i from 1 through 4 {
    .prepare_teach#{$i} {
        .prepare_example {
            @include bg("prepare_example" + $i + ".png");
        }
    }
}
.prepare_canvas {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    transform: scaleX(-1);
}
.prepare_text {
    margin-top: 4px;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    color: #333333;
    text-align: center;
}
.prepare_btn_list {
    margin-top: 330px;
    margin-bottom: 15px;
    width: 100%;
    height: 40px;
    text-align: center;
    font-size: 0;
}
%prepare_btn {
    display: inline-block;
    vertical-align: top;
    margin: 0 20px;
    width: 140px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(61, 58, 54, 0.5);
    text-align: center;
    cursor: pointer;
}
.prepare_reset_btn {
    @extend %prepare_btn;
    background-image: linear-gradient(0deg, #cbcbcb 0%, #f2f2f2 100%);
}
.prepare_finish_btn {
    @extend %prepare_btn;
    background-image: linear-gradient(180deg, #fff21b 0%, #ffb91b 100%);
}
.prepare_tips {
    margin-top: 15px;
    padding: 0 30px;
    font-size: 14px;
}